<template>
  <el-card
    class="quote-card"
    shadow="never"
    :class="{
      'not-quote': (!header && !!description) || (!header && !description)
    }"
  >
    <template #header>
      <template v-if="header">
        <div
          v-if="!!description"
          class="font-semibold ml-2"
          :data-description="description"
        >
          {{ header }}
        </div>
        <div v-else class="font-semibold ml-2">{{ header }}</div>
      </template>
      <div v-else-if="!header && !!description" class="text-info text-sm">
        {{ description }}
      </div>
    </template>

    <div class="quote-card__body pl-2">
      <slot></slot>
    </div>
  </el-card>
</template>

<script setup lang="ts">
interface IProps {
  header?: string
  description?: string
}

withDefaults(defineProps<IProps>(), {
  header: '',
  description: ''
})
</script>

<style scoped lang="scss">
.quote-card {
  @apply w-full bg-white pt-4;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
  &.not-quote :deep(.el-card__header) {
    padding: 0 16px;
    &::before {
      display: none;
    }
  }
  :deep(.el-card__header) {
    @apply mb-2 border-none relative text-sm;
    padding: 0 16px 0 20px;

    &::before {
      content: '';
      @apply absolute w-[3px] h-[13px] bg-primary top-1/2 -translate-y-1/2 left-4;
    }

    div[data-description] {
      @apply mb-8;
      &::after {
        content: attr(data-description);
        @apply text-info font-normal text-sm absolute top-7 left-4;
      }
    }
  }
  :deep(.el-card__body) {
    @apply px-4;
  }
}
</style>
